<template>
    <div class="login-container">
        <div class="login-box">
            <el-form class="login-from" ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="form.user_name"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">登录</el-button>
                    <el-button>注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                user_name: '',
                password: ''
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.login-container {
    height: 100%;
    background-image: url("../../assets/bg.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-box {
        width: 500px;
        height: 400px;
        background-color: rgba(0, 200, 255, 0.57);
        .login-from {
            width: 100%;
            height: 100%;
            padding: 70px 100px 0px 20px;
            box-sizing: border-box;
        }
    }
}
</style>
<!-- http://192.168.110.10:3000/login -->